<template>
  <div class="flex items-center p-4 cursor-pointer hover:bg-gray-100 transition-colors"
    :class="{ 'bg-blue-50': isActive }" @click="handleClick">
    <!-- 头像 -->
    <div class="relative">
      <el-avatar :size="40" :src="session.targetAvatar" />
      <div v-if="session.unreadCount > 0"
        class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
        {{ session.unreadCount > 99 ? '99+' : session.unreadCount }}
      </div>
    </div>

    <!-- 会话信息 -->
    <div class="flex-1 ml-3 min-w-0">
      <div class="flex justify-between items-center">
        <span class="font-medium truncate">{{ session.targetName }}</span>
        <span v-if="session.lastMessageTime" class="text-xs text-gray-500">
          {{ formatDateTime(session.lastMessageTime) }}
        </span>
      </div>
      <div class="flex justify-between items-center mt-1">
        <span class="text-sm text-gray-500 truncate">
          {{ session.lastMessage || '暂无消息' }}
        </span>
        <el-icon v-if="session.isTop" class="text-blue-500">
          <Top />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Top } from '@element-plus/icons-vue'
import type { ChatSessionResponse } from '@/types'
import { formatDateTime } from '@/utils/datetime'

const props = defineProps<{
  session: ChatSessionResponse
  activeId?: string | null
}>()

const emit = defineEmits<{
  (e: 'click', session: ChatSessionResponse): void
}>()

const isActive = computed(() => props.activeId === props.session.id)

const handleClick = () => {
  emit('click', props.session)
}
</script>